<template>
  <a-modal
    v-model:open="modalVisible"
    centered
    :keyboard="false"
    :maskClosable="false"
    :closable="true"
    width="100vw"
    wrap-class-name="preview-full-modal"
    :footer="false"
    v-bind="$attrs"
  >
    <template #title>
      <slot name="title">{{ $attrs.title }}</slot>
    </template>
    <slot />
  </a-modal>
</template>

<script setup>
import { nextTick, ref, watch, computed } from "vue";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
});

const emits = defineEmits(["update:modelValue"]);

const modalVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    return emits("update:modelValue", val);
  },
});
</script>

<style lang="less" scoped>
.preview-code-wrapper {
  height: 100%;
}
</style>

<style lang="less">
.preview-full-modal {
  position: relative;
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-close {
    top: 10px;
    right: 6px;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    padding: 5px 8px;
  }
  .ant-modal-body {
    flex: 1;
    padding: 0;
  }
}
</style>
